<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入样式表 -->
    <link rel="stylesheet" href="./assets/news.css" />
  </head>

  <body>
    <!-- 新闻列表 -->
    <div id="news-list">
      <!-- 新闻的 item 项 -->
    </div>

    <!-- 导入axios -->
    <script src="./lib/axios.js"></script>
    <script>
      // 1.调用接口获取数据
      window.onload = function () {
        axios.get('http://ajax-api.itheima.net/api/news').then(res => {
          // 服务器响应的数据 具体由什么 需要确认一下
          console.log(res)
          // 2. 数组->html数组->html->渲染到页面上
          document.querySelector('#news-list').innerHTML = res.data.data
            // 用结构简化后续的取值
            .map(({ img, title, source, time, cmtcount }) => {
              // item 数组的每一项
              return ` <div class="news-item">
                    <img class="thumb" src="${img}" alt="" />
                    <div class="right-box">
                      <!-- 新闻标题 -->
                      <h1 class="title">${title}</h1>
                      <div class="footer">
                        <div>
                          <!-- 新闻来源 -->
                          <span>${source}</span>&nbsp;&nbsp;
                          <!-- 发布日期 -->
                          <span>${time}</span>
                        </div>
                        <!-- 评论数量 -->
                        <span>评论数：${cmtcount}</span>
                      </div>
                    </div>
                  </div>  `
            })
            .join('')
        })
      }
    </script>
  </body>
</html>
